<template>
  <el-dialog :model-value="show" title="添加角色" @close="emit('hide')">
    <el-form ref="formRef" :model="from" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="from.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="from.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="from.status" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary" @click="submitFn">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, watch } from "vue";
import { addRoleApi, updateUserRole } from "./api/index";
import type { FormInstance } from "element-plus";

const formRef = ref<FormInstance>();

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
  name: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: "",
  },
  status: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["hide"]);
const from = reactive<IRoleListModel>({
  adminCount: 0,
  createTime: "",
  description: "",
  id: 0,
  name: "",
  sort: 0,
  status: 0,
});

const rules = {
  name: [{ required: true, trigger: "blur", message: "请填写角色名称" }],
  description: [{ required: true, trigger: "blur", message: "请填写描述内容" }],
};

const addRole = () => {
  ElMessageBox.confirm("确定要添加角色吗？", "添加角色", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => {
      addRoleApi(from).then((res) => {
        if (res.code === 200) {
          emit("hide", true);
          formRef.value?.resetFields();
          ElMessage.success("添加成功");
        }
      });
    })
    .catch(() => {
      //   console.log("点击的取消");
    });
};
watch(
  () => props.id,
  () => {
    if (props.id !== 0) {
      Object.assign(from, {
        id: props.id,
        name: props.name,
        description: props.description,
        status: props.status,
      });
    }
  }
);
const editRole = () => {
  ElMessageBox.confirm("确定要修改当前角色的修改吗？", "修改角色信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateUserRole(from).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          formRef.value?.resetFields();
          emit("hide", true);
        }
      });
    })
    .catch(() => {});
};
const submitFn = () => {
  formRef.value?.validate((right: boolean) => {
    if (right) {
      if (props.id === 0) {
        addRole();
      } else {
        editRole();
      }
    } else {
      ElMessage("无效操作");
    }
  });
};
</script>

<style lang="less" scoped></style>
